<template>
    <div class="container">
        <div class="padding">
            <cmsTitle no-back />
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane v-for="i in navList" :key="i[0]" :label="i[0]" />
            </el-tabs>
        </div>
        <keep-alive>
            <component
                :is="navList[activeName][1]"
                style="flex:1"
                :layout="navList[activeName][1]"
            />
        </keep-alive>
    </div>
</template>

<script>
import labourCheck from './page/labourCheck'
import machineCheck from './page/machineCheck'
import watch from './page/watch'
import userRecommend from './page/userRecommend'
import contentRecommend from './page/contentRecommend'
export default {
    components: {
        labourCheck,
        machineCheck,
        watch,
        userRecommend,
        contentRecommend
    },
    props: {},
    data () {
        return {
            activeName: '0',
            navList: [
                ['人工审核', 'labourCheck'],
                ['机器人审核', 'machineCheck'],
                ['内容监控', 'watch'],
                ['用户推荐池', 'userRecommend'],
                ['内容推荐池', 'contentRecommend']
            ]
        }
    },
    computed: {
        select () {
            return this.navList[this.activeName][1]
        }
    },
    watch: {
        activeName (val) {
            sessionStorage.setItem('contentActive', val)
        }
    },
    created () {
        if (sessionStorage.contentActive) {
            this.activeName = sessionStorage.contentActive
        }
    },
    mounted () {},
    methods: {}
}
</script>

<style scoped lang="stylus">
.padding
    padding: 0 40px
    background: #fff
.container::v-deep
    min-height: 100%
    display: flex
    flex-direction: column
</style>
